﻿<div ng-app="app">
    <div ng-controller="HomeController">
        <br />
        <!--Show when not adding a movie-->
        <div ng-show="!isAdding" ng-cloak>
            <button class="btn btn-default" ng-click="isAdding = true">Create New Movie</button>
            <div ng-repeat="m in movies">
                <div class="well">
                    <h5><i>Title:</i> {{m.Title}}</h5>
                    <h5><i>Rating:</i> {{m.Rating}}</h5>
                    <h5><i>Director:</i> {{m.Director}}</h5>
                    <button class="btn btn-danger" ng-click="deleteMovie(m.MovieId)">Delete</button>
                </div>
                <br />
            </div>
        </div>
        <!--Show when adding a movie-->
        <div ng-show="isAdding" class="well" ng-cloak>
            Title: <input ng-model="addMovie.Title" placeholder="Title..." class="form-control" />
            Director: <input ng-model="addMovie.Director" placeholder="Director..." class="form-control" />
            Rating: <select class="form-control" ng-model="addMovie.Rating">
                <option value="0" selected>G</option>
                <option value="1">PG</option>
                <option value="2">PG-13</option>
                <option value="3">R</option>
            </select>
            <button class="btn btn-default" ng-click="createMovie()">Submit</button><button class="btn btn-danger" ng-click="isAdding = false">Cancel</button>
        </div>
    </div>
</div>